<template>
    <transition name="view">
        <div class="yk-view" v-if="isView">
            <div class="background"></div>
            <div class="view-photo">
                <img :src="baseUrl + photos[nowPhoto]" alt="" class="photo-image">
            </div>
            <div class="switch switch-left" @click="changePhoto(0)" v-show="nowPhoto > 0">
                <span class="iconfont icon-xiangzuo"></span>
            </div>
            <div class="switch switch-right" @click="changePhoto(1)" v-show="nowPhoto < photos.length - 1">
                <span class="iconfont icon-xiangyou"></span>
            </div>
        </div>
    </transition>
</template>

<script>
    import config from '@/utils/env'
    const baseUrl = config.baseUrl

    export default {
        data() {
            return {
                baseUrl,
            }
        },
        props: {
            photos: {
                default: []
            },
            nowPhoto: {
                type: Number,
                default: 0
            },
            isView: {
                default: false
            }
        },
        methods: {
            changePhoto(e) {
                this.$emit('viewSwitch',e)
            }
        }
    }
</script>


<style lang="less" scoped>
    .yk-view {
        position: fixed;
        top: 0;
        left: 0;
        width: calc(100% - 360px);
        height: 100%;
        z-index: 10;
    }

    .background {
        background-color: rgba( 255, 255, 255, .9);
        backdrop-filter: blur(20px);
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .view-photo {
        width: 100%;
        height: 100%;
        overflow: auto;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
    }

    .photo-image {
        padding: 82px 60px;
        box-sizing: border-box;
        max-width: 100%;
        height: 100%;
    }
    
    .switch {
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: @gray-2;
        color: @gray-4;
        position: absolute;
        top: 50%;
        cursor: pointer;
        user-select: none;
        opacity: .5;
        transition: all .3s ease-in-out;
    }

    .switch:hover {
        opacity: 1;
    }

    .switch-left {
        left: 20px;
    }

    .switch-right {
        right: 30px;
    }

    .icon-xiangzuo,
    .icon-xiangyou {
        font-size: 20px;
    }

    .view {
        // 动画效果
        &-enter {
            &-from {
                opacity: 0;
            }
            &-active {
                transition: all .3s ease-in-out;
            }
            &-to {
                opacity: 1;
            }
        }
        &-leave {
            &-from {
                opacity: 1;
            }
            &-active {
                transition: all .3s ease-in-out;
            }
            &-to {
                opacity: 0;
            }
        }
    }

    // 禁止点击
    .disabled {
        cursor: not-allowed;
    }   
</style>